<template>
    <div class="caseList">
        <!-- 筛选bar -->
        <div class="filter-bar">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-input placeholder="患者名称" v-model="c_patient"  class="input-with-select"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input placeholder="科室名称" v-model="c_department"  class="input-with-select"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary"  @click="handleKeywordFilter">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table">
            <el-table :data="tableData" height="438"  v-loading="loading" stripe>
                <el-table-column label="编号" type="index" :index="indexMethod">
                </el-table-column>
                <el-table-column label="症状">
                    <template slot-scope="scope">
                        <span>{{ scope.row.c_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="就诊科室" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.d_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="患者姓名">
                    <template slot-scope="scope">
                        <span>{{ scope.row.p_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="就诊医生">
                    <template slot-scope="scope">
                        <span>{{ scope.row.doc_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="set(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="getDepartmentListByPage" :current-page.sync="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {caseListGet} from "../../api/case";
    export default {
        name: "list",
        data() {
            return {
                loading:false,
                c_patient:'',
                c_department:'',
                tableData:[],
                pageIndex: 1, //默认显示第一页
                pageSize: 6, //每页显示
                total: 0,
                dialogVisible:false,
            }
        },

        created() {
            this.getList();
        },

        mounted() {

        },

        methods: {
            handleKeywordFilter(){
                this.getList();
            },
            async getList(){
                try{
                    let res = await caseListGet({
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                        c_patient:this.c_patient,
                        c_department:this.c_department,
                        hospitalId:sessionStorage.getItem('hospitalId')
                    });
                    console.log(res,'病例信息');
                    this.tableData = res.list;
                    this.total = res.total;
                }catch (e) {
                    console.error(e);
                }
            },
            handleKeywordFilter(){
                this.getList();
            },
            indexMethod(index) {
                return index + (this.pageIndex - 1) * this.pageSize + 1;
            },
            getDepartmentListByPage(){
                this.getList();
            },
            set(row){
                    this.$router.push({
                        path: "/caseManage/detail",
                        query: {
                            id: row.c_id
                        }
                    });
            },
        },
    }
</script>

<style scoped lang='scss'>
    .caseList {
        height: 100%;
        position: relative;
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 20px 0 20px ;
        .filter-bar {
            width: 100%;
            margin-bottom: 10px;
            .el-row {
                .el-col {
                    > div {
                        width: 100%;
                    }
                }
                .el-col-5 {
                    max-width: 180px;
                }
                .el-col-9 {
                    max-width: 440px;
                }
            }
        }
        .table{
            margin-top: 20px;
            height: auto;
            .el-table {
                width: 100%;
                height: 100%;
                margin-top: 10px;
                font-size: 14px;
                /*min-height: calc(100% - 88px);*/
            }
        }
        .page{
            margin-top: 20px;
            .el-pagination{
                text-align: center;
            }
        }
    }
</style>